<template>
  <canvas :width="width" :height="height" ref="canvasRef"></canvas>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as GLMatrix from "gl-matrix";
import { useRoute } from "vue-router";


const route = useRoute();
const width = ref<number>(600);
const height = ref<number>(600);
const canvasRef = ref<HTMLCanvasElement>();
const glRef = ref<WebGLRenderingContext>();
const proRef = ref<WebGLProgram>();
onMounted(() => {
  init();
  onRenderTri();
});


const init = () => { // 顶点着色器  偏移量为屏幕坐标系
  const gl = canvasRef.value?.getContext("webgl");
  if (!gl) return;
  gl.viewport(0, 0, width.value, height.value);

  const veString = `
    attribute vec4 a_position;
    uniform mat4 viewPro;
    void main(void){
      gl_Position = viewPro * a_position ;
      gl_PointSize = 2.0;
    }
  `;

  const frString = `
    void main(void){
      gl_FragColor = vec4(1.0,1.0,0.0,1.0);
    }
  `;
  const veShader = gl.createShader(gl.VERTEX_SHADER);
  if (!veShader) return;
  gl.shaderSource(veShader, veString);
  gl.compileShader(veShader);

  if (!gl.getShaderParameter(veShader, gl.COMPILE_STATUS)) {
    throw new Error(gl.getShaderInfoLog(veShader) || "");
  }

  const frShader = gl.createShader(gl.FRAGMENT_SHADER);
  if (!frShader) return;
  gl.shaderSource(frShader, frString);
  gl.compileShader(frShader);

  const pro = gl.createProgram();
  if (!pro) return;
  gl.attachShader(pro, veShader);
  gl.attachShader(pro, frShader);
  gl.linkProgram(pro);
  gl.useProgram(pro);
  gl.clearColor(0, 0, 0, 1);
  gl.clear(gl.COLOR_BUFFER_BIT);

  glRef.value = gl;
  proRef.value = pro;
};

const onRenderTri = () => {
  if (!glRef.value) return;
  if (!proRef.value) return;
  const mat4 = GLMatrix.mat4.create();
  GLMatrix.mat4.ortho(mat4, 0, width.value, height.value, 0, -1, 1);
  const gl = glRef.value;
  const pro = proRef.value;
  // 两个三角组合矩形
  const points = new Float32Array([
    150, 150,
    450, 150,
    450, 450,
    150, 450
  ]);
  const { title } = route.meta as { title: string };
  if (title === "DrawArrays") {
    const buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);

    const a_position = gl.getAttribLocation(pro, "a_position");
    gl.enableVertexAttribArray(a_position);
    gl.vertexAttribPointer(a_position, 2, gl.FLOAT, true, 0, 0);

    const view = gl.getUniformLocation(pro, "viewPro");
    gl.uniformMatrix4fv(view, false, mat4);

    gl.clearColor(0, 0, 0, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);

    gl.drawArrays(gl.TRIANGLE_FAN, 0, points.length / 2);
  } else {
    const buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);


    // 指定绘制索引
    const eles = new Uint16Array([
      0, 1, 2,// 组成一个三角形
      0, 2, 3 // 一个三角形顶点索引

      // 多次组合
    ])

    const eleBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, eleBuffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, eles, gl.STATIC_DRAW)

    const a_position = gl.getAttribLocation(pro, "a_position");
    gl.enableVertexAttribArray(a_position);
    gl.vertexAttribPointer(a_position, 2, gl.FLOAT, true, 0, 0);

    const view = gl.getUniformLocation(pro, "viewPro");
    gl.uniformMatrix4fv(view, false, mat4);

    gl.clearColor(0, 0, 0, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawElements(gl.TRIANGLE_FAN, eles.length, gl.UNSIGNED_SHORT, 0)
  }


};



</script>

<style></style>
